JavaScripti jõudluse optimeerimine: koodi tükeldamine vs. laisk hindamine

import React, { Suspense } from 'react';

const OtherComponent = React.lazy(() => import('./OtherComponent'));

function MyComponent() {
  return (
    

      Laadimine...
}>
        
      
    

Selles näites laaditakse OtherComponent ainult siis, kui see on renderdatud. Kui seda laaditakse, näeb kasutaja teadet "Laadimine...".

Tööriistad koodi tükeldamiseks

• Webpack: Populaarne moodulipakettija, mis toetab erinevaid koodi tükeldamise tehnikaid.
• Rollup: Teine moodulipakettija, mis keskendub väikeste, tõhusate pakettide loomisele.
• Parcel: Nullkonfiguratsiooniga pakettija, mis käsitleb automaatselt koodi tükeldamist.
• Vite: Build tööriist, mis kasutab kiireks arenduseks ja optimeeritud tootmisüksuste jaoks native ES mooduleid.

Laisk hindamine: arvutuste edasilükkamine

Mis on laisk hindamine?

Laisk hindamine, tuntud ka kui edasi lükatud hindamine, on programmeerimistehnika, kus avaldise hindamine viibitakse seni, kuni selle väärtust tegelikult vaja on. Teisisõnu, arvutused tehakse alles siis, kui nende tulemusi nõutakse, mitte neid innukalt ette arvestades.

Kujutage ette, et valmistate mitmekäigulist einet. Te ei küpsetaks iga rooga korraga. Selle asemel valmistaksite iga roa alles siis, kui on aeg seda serveerida. Laisk hindamine töötab sarnaselt, tehes arvutusi ainult siis, kui nende tulemusi vaja on.

Kuidas laisk hindamine töötab

JavaScriptis saab laiska hindamist rakendada erinevate tehnikate abil:

• Funktsioonid: Avaldise funktsiooni sisse pakkimine võimaldab teil selle hindamist edasi lükata kuni funktsiooni kutsumiseni.
• Generaatorid: Generaatorid pakuvad võimalust luua iteraatoreid, mis toodavad väärtusi nõudmisel.
• Memoization: Memoization hõlmab kallite funktsioonikõnede tulemuste vahemällu salvestamist ja vahemällu salvestatud tulemuse tagastamist, kui samad sisendid uuesti esinevad.
• Proksid: Proksisid saab kasutada omaduste juurdepääsu pealtkuulamiseks ja omaduste väärtuste arvutamise edasilükkamiseks kuni nende tegeliku juurde pääsemiseni.

Laisk hindamise eelised

• Parem jõudlus: Vältides tarbetuid arvutusi, võib laisk hindamine oluliselt parandada jõudlust, eriti suurte andmekogumite või keerukate arvutuste korral.
• Vähendatud mälukasutus: Laisk hindamine võib vähendada mälukasutust, vältides vaheväärtuste loomist, mida kohe vaja ei lähe.
• Suurenenud reageerimisvõime: Vältides esialgse laadimise ajal tarbetuid arvutusi, võib laisk hindamine suurendada rakenduse reageerimisvõimet.
• Lõputud andmestruktuurid: Laisk hindamine võimaldab teil töötada lõputute andmestruktuuridega, nagu lõputud loendid või voogud, arvutades ainult vajalikke elemente nõudmisel.

Näide: piltide laisk laadimine

Laisk hindamise levinud kasutusjuhtum on piltide laisk laadimine. Selle asemel, et laadida kõik pildid lehele ette, saate edasi lükata nende piltide laadimise, mis pole algselt vaateväljas nähtavad. See võib oluliselt parandada lehe esialgset laadimisaega ja vähendada võrgu ribalaiuse tarbimist.

function lazyLoadImages() {
  const images = document.querySelectorAll('img[data-src]');
  const observer = new IntersectionObserver((entries) => {
    entries.forEach((entry) => {
      if (entry.isIntersecting) {
        const img = entry.target;
        img.src = img.dataset.src;
        observer.unobserve(img);
      }
    });
  });
  images.forEach((img) => {
    observer.observe(img);
  });
}

document.addEventListener('DOMContentLoaded', lazyLoadImages);

See näide kasutab IntersectionObserver API-d, et tuvastada, kui pilt siseneb vaatevälja. Kui pilt on nähtav, seatakse selle src atribuut väärtuseks selle data-src atribuut, käivitades pildi laadimise. Seejärel jälgija lõpetab pildi jälgimise, et vältida selle uuesti laadimist.

Näide: memoization

Memoizationit saab kasutada kallite funktsioonikõnede optimeerimiseks. Siin on näide:

function memoize(func) {
  const cache = {};
  return function(...args) {
    const key = JSON.stringify(args);
    if (cache[key]) {
      return cache[key];
    }
    const result = func(...args);
    cache[key] = result;
    return result;
  };
}

function expensiveCalculation(n) {
  // Simuleeri aeganõudvat arvutust
  for (let i = 0; i < 100000000; i++) {
    // Tee midagi
  }
  return n * 2;
}

const memoizedCalculation = memoize(expensiveCalculation);

console.time('Esimene kõne');
console.log(memoizedCalculation(5)); // Esimene kõne - võtab aega
console.timeEnd('Esimene kõne');

console.time('Teine kõne');
console.log(memoizedCalculation(5)); // Teine kõne - tagastab vahemällu salvestatud väärtuse kohe
console.timeEnd('Teine kõne');

Selles näites võtab funktsioon memoize funktsiooni sisendina ja tagastab selle funktsiooni memoiseeritud versiooni. Memoised funktsioon salvestab eelmiste kõnede tulemused vahemällu, nii et järgmised kõned samade argumentidega saavad tagastada vahemällu salvestatud tulemuse ilma algse funktsiooni uuesti täitmata.

Koodi tükeldamine vs. laisk hindamine: peamised erinevused

Kuigi nii koodi tükeldamine kui ka laisk hindamine on võimsad optimeerimistehnikad, käsitlevad need jõudluse erinevaid aspekte:

• Koodi tükeldamine: Keskendub esialgse paketi suuruse vähendamisele, jagades koodi väiksemateks tükkideks ja laadides neid nõudmisel. Seda kasutatakse peamiselt esialgse lehe laadimisaja parandamiseks.
• Laisk hindamine: Keskendub väärtuste arvutamise edasi lükkamisele kuni hetkeni, mil neid tegelikult vaja on. Seda kasutatakse peamiselt jõudluse parandamiseks kallite arvutuste või suurte andmekogumitega töötamisel.

Põhimõtteliselt vähendab koodi tükeldamine koodi hulka, mis tuleb ette alla laadida, samas kui laisk hindamine vähendab arvutuste hulka, mis tuleb ette teha.

Millal kasutada koodi tükeldamist vs. laisk hindamine

Koodi tükeldamine

• Suured rakendused: Kasutage koodi tükeldamist rakenduste puhul, millel on palju JavaScripti koodi, eriti need, millel on mitu marsruuti või funktsiooni.
• Esialgse laadimisaja parandamine: Kasutage koodi tükeldamist, et parandada lehe esialgset laadimisaega ja vähendada interaktiivseks saamise aega.
• Võrgu ribalaiuse vähendamine: Kasutage koodi tükeldamist, et vähendada võrgu kaudu edastatavate andmete hulka.

Laisk hindamine

• Kallid arvutused: Kasutage laiska hindamist funktsioonide puhul, mis teevad kalleid arvutusi või pääsevad juurde suurtele andmekogumitele.
• Reageerimisvõime parandamine: Kasutage laiska hindamist rakenduse reageerimisvõime parandamiseks, lükates esialgse laadimise ajal edasi tarbetuid arvutusi.
• Lõputud andmestruktuurid: Kasutage laiska hindamist töötamisel lõputute andmestruktuuridega, nagu lõputud loendid või voogud.
• Meedia laisk laadimine: Rakendage piltide, videote ja muude meediavarade laisk laadimine, et parandada lehe laadimisaegu.

Koodi tükeldamise ja laisk hindamise kombineerimine

Paljudel juhtudel saab koodi tükeldamist ja laiska hindamist kombineerida, et saavutada veelgi suurem jõudluse suurenemine. Näiteks võiksite kasutada koodi tükeldamist, et jagada oma rakendus väiksemateks tükkideks, ja seejärel kasutada laiska hindamist, et edasi lükata nende tükkide sees olevate väärtuste arvutamine.

Mõelge e-kaubanduse rakendusele. Saate kasutada koodi tükeldamist, et jagada rakendus eraldi pakettideks toodete nimekirja lehe, toote üksikasjade lehe ja kassalehe jaoks. Seejärel saate toote üksikasjade lehel kasutada laiska hindamist, et edasi lükata piltide laadimine või tootesoovituste arvutamine kuni hetkeni, mil neid tegelikult vaja on.

Lisaks koodi tükeldamisele ja laiskale hindamisele: täiendavad optimeerimistehnikad

Kuigi koodi tükeldamine ja laisk hindamine on võimsad tehnikad, on need vaid kaks osa puslest JavaScripti jõudluse optimeerimisel. Siin on mõned täiendavad tehnikad, mida saate kasutada jõudluse edasiseks parandamiseks:

• Minifitseerimine: Eemaldage oma koodist tarbetud märgid (nt tühikud, kommentaarid), et vähendada selle suurust.
• Pakkimine: Pake oma kood kokku selliste tööriistadega nagu Gzip või Brotli, et veelgi vähendada selle suurust.
• Vahemälu: Kasutage brauseri vahemälu ja CDN-i vahemälu, et vähendada serverisse tehtavate päringute arvu.
• Puude raputamine: Eemaldage oma pakettidest kasutamata kood, et vähendada nende suurust.
• Piltide optimeerimine: Optimeerige pilte, tihendades neid, muutes nende suurust sobivate mõõtmeteni ja kasutades kaasaegseid pildivorminguid nagu WebP.
• Vältimine ja piiramine: Kontrollige sündmuste käsitlejate täitmise kiirust, et vältida jõudlusprobleeme.
• Tõhus DOM-i manipuleerimine: Minimeerige DOM-i manipulatsioone ja kasutage tõhusaid DOM-i manipuleerimise tehnikaid.
• Veebitöötajad: Delegeerige arvutusmahukad ülesanded veebitöötajatele, et vältida nende peamist niiti blokeerimist.

Kokkuvõte

JavaScripti jõudluse optimeerimine on oluline aspekt positiivse kasutajakogemuse pakkumisel ja ärieesmärkide saavutamisel. Koodi tükeldamine ja laks hindamine on kaks võimsat tehnikat, mis võivad oluliselt parandada jõudlust, vähendades esialgseid laadimisaegu, vähendades võrgu ribalaiuse tarbimist ja lükates edasi tarbetuid arvutusi. Mõistes, kuidas need tehnikad töötavad ja millal neid kasutada, saate luua kiiremaid, reageerivamaid ja nauditavamaid veebirakendusi.

Pidage meeles, et arvestage oma konkreetsete rakenduse nõuetega ja kasutage tehnikaid, mis on teie vajaduste jaoks kõige sobivamad. Jälgige pidevalt oma rakenduse jõudlust ja korrake oma optimeerimisstrateegiaid, et tagada parima võimaliku kasutajakogemuse pakkumine. Omandage koodi tükeldamise ja laiska hindamise jõud, et luua veebirakendusi, mis pole mitte ainult funktsioonirikkad, vaid ka jõudlusega ning meeldivad kasutajatele kogu maailmas.

Täiendavad õppematerjalid

• Webpacki dokumentatsioon: https://webpack.js.org/
• Rollupi dokumentatsioon: https://rollupjs.org/guide/en/
• Vite dokumentatsioon: https://vitejs.dev/
• MDN Web Docs - Intersection Observer API: https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API
• Google'i arendajad - JavaScripti täitmise optimeerimine: https://developers.google.com/web/fundamentals/performance/optimizing-javascript/